<template>
  <div class="template_container">
    <div class="tree_box" v-if="role_data.tree_status">
      <TreeComponent/>
    </div>
    <div class="template_box">
      <!--    查询-->
      <div class="template_search">
        <div class="template_search_box">
          <div class="title">角色名称：</div>
          <a-input v-model:value="role_data.role_name" placeholder="请输入搜索内容"/>
        </div>
        <div class="template_search_box">
          <a-button style="margin-right: 10px" type="primary" @click="search_data">查询</a-button>
          <a-button type="primary" @click="reset_search">重置</a-button>
        </div>
      </div>
      <!--    列表-->
      <div class="template_table">
        <div class="template_add_btn">
          <a-button style="margin-right: 0.2rem" type="primary" @click="add_role_click">新增</a-button>
          <a-button type="primary" @click="reset_search">刷新</a-button>
        </div>
        <div class="table_box">
          <a-table :pagination="false" bordered :dataSource="role_data.data_list" :columns="columns">
            <template v-for="col in ['roleCode', 'roleName']" #[col]="{ text, record }" :key="col">
              <div>
                <a-input
                    v-if="editableData[record.key]"
                    v-model:value="editableData[record.key][col]"
                    style="margin: -5px 0"
                />
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template #operation="{ record }">
              <a-popconfirm
                  v-if="role_data.data_list.length && !statusObject.edit_status"
                  title="确认删除当前角色么?"
                  okText="确认"
                  cancelText="取消"
                  @confirm="onDelete(record.key)"
              >
                <a :style="{color:'red'}">删除</a>
              </a-popconfirm>
              <span v-if="role_data.data_list.length">
                <span v-if="editableData[record.key]">
                  <a-popconfirm title="确认提交?"
                                okText="确认"
                                cancelText="取消"
                                @confirm="save(record.key)">
                    <a>保存</a>
                  </a-popconfirm>
                  <a-popconfirm title="确认执行取消操作?"
                                okText="确认"
                                cancelText="取消"
                                @confirm="cancel(record.key)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a @click="edit(record.key)">编辑</a>
                </span>
              </span>
            </template>
          </a-table>
          <a-pagination v-if="pageObject.total>10" style="margin-top: 10px" v-model:current="pageObject.currentPage"
                        :total="pageObject.total"
                        @change="changePage"/>
        </div>
      </div>
    </div>
    <add_role_component @re_flash:re_flash="reset_search"/>
  </div>
</template>

<script>
import {defineComponent, ref, reactive} from 'vue';
import TreeComponent from "@/components/tree/index"
import {get_role_list, delete_role} from "@/api/role"
import {message} from "ant-design-vue";
import add_role_component from "@/views/system/role/add_role";
import {useStore} from "vuex"
import {cloneDeep} from "lodash-es";
import {add_role} from "@/api/role"

export default defineComponent({
  // name: "WorkpieceInformation";
  props: {},
  setup() {

    const store = useStore()
    const role_data = reactive({
      tree_status: false,
      role_name: "",
      role_type_number: "",
      data_list: []
    });

    const edit_params = reactive({
      "roleId": 0,
      "roleName": "",
      "status": 0,
      "roleCode": "",
      "createTime": "2021-05-06T06:12:40.983Z",
      "createUserId": 0
    })

    /**
     * status
     *
     * */
    const statusObject = reactive({
      edit_status: false
    })

    /**
     * 编辑
     *
     * */
    const editableData = reactive({});

    /**
     * 页面的参数
     * */
    const pageObject = reactive({
      pageSize: 10,
      pageIndex: 1,
      total: 10,
      currentPage: 1
    })
    const columns = [
      {
        title: '角色编号',
        dataIndex: 'roleCode',
        key: 'roleCode',
        slots: {
          customRender: 'roleCode',
        },
      },
      {
        title: '角色名称',
        dataIndex: 'roleName',
        key: 'roleName',
        slots: {
          customRender: 'roleName',
        },
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
      },
      {
        title: '操作',
        dataIndex: 'edit',
        key: 'edit',
        slots: {
          customRender: 'operation',
        },
      },
    ];
    // const value = ref('');
    const device_number = ref('')
    const device_type_number = ref('')
    const terminal_number = ref('')

    //列表删除确认
    const onDelete = async key => {
      // dataSource.value = dataSource.value.filter(item => item.key !== key);
      console.log(role_data.data_list[key])
      let params = {
        "parm": key.toString()
      }
      const res = await delete_role(params)
      if (res.code === 1) {
        message.success("删除成功")
        await get_list()
        return
      }
      message.warning(res.message)

    };
    /**
     * 获取角色列表数据
     *
     * */
    const get_list = async () => {
      let params = {
        "pageIndex": pageObject.pageIndex,
        "pageSize": pageObject.pageSize,
        "id": 0,
        "searchValue": role_data.role_name,
        "searchBeginTime": "",
        "searchEndTime": "",
        "field": "",
        "order": "",
        "where": ""
      }
      const res = await get_role_list(params)
      console.log(res)
      if (res.code === 1) {
        pageObject.total = res.data.totalItems
        let result_list = res.data.items

        for (let i = 0; i < result_list.length; i++) {
          result_list[i].key = i
        }
        role_data.data_list = result_list

      }
    }

    const changePage = (e) => {
      pageObject.pageIndex = e
      get_list()
    }

    /**
     * 初始化
     * */

    get_list()

    /**
     *
     * 查询
     * */
    const search_data = () => {
      get_list()
    }

    /**
     * 重置
     *
     * */
    const reset_search = () => {
      role_data.role_name = null
      get_list()
    }

    /**
     * 角色新增
     * */
    const add_role_click = () => {
      store.commit("SET_ADD_ROLE", true)
    }

    /**
     * 编辑
     * */
    const edit = key => {
      editableData[key] = cloneDeep(role_data.data_list.filter(item => key === item.key)[0]);
      statusObject.edit_status = true
    };

    const save = async key => {
      /*
      * 修改之后的参数
      * */
      edit_params.roleId = role_data.data_list[key].roleId
      edit_params.roleName = editableData[key].roleName
      edit_params.roleCode = editableData[key].roleCode
      const res = await add_role(edit_params)
      console.log(res)
      if (res.code === 1) {
        delete editableData[key];
        statusObject.edit_status = false
        message.success("修改成功")
        reset_search()
        return
      }
      message.warning(res.message)

    };

    const cancel = key => {
      delete editableData[key];
      statusObject.edit_status = false
    };


    return {
      device_number,
      device_type_number,
      terminal_number,
      columns,
      statusObject,
      //状态管理
      store,
      onDelete,
      role_data,
      pageObject,
      editableData,
      changePage,
      search_data,
      reset_search,
      add_role_click,
      edit,
      save,
      cancel

    };
  },
  components: {
    TreeComponent,
    add_role_component

  }
});

</script>

<style scoped lang="scss">

</style>
